import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class DemoComp extends StatelessWidget {
  const DemoComp({super.key});

  @override
  Widget build(BuildContext context) {
    // 1. 提供的数据
    const Map orderInfo = {
      'createTime': "2024-08-15 21:49:48",
      'orderState': "待发货",
      'image':
          "https://yanxuan-item.nosdn.127.net/a09de222ed32efa8ffe359b1d5780574.jpg",
      'name': "茶水分离杯耐热隔热玻璃杯茶水分离杯耐热隔热玻璃杯",
      'totalNum': 2,
      'curPrice': 119.5,
      'attrsText': "规格: 白色240ml"
    };

    return Scaffold(
        appBar:
            AppBar(title: const Text('案例-商品订单信息'), backgroundColor: Colors.red),
        body: Container(
          padding: const EdgeInsets.all(10),
          color: Colors.white,
          child:  Column(
            children: [
              // 1. 订单时间和订单状态
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                   // 1.1 创建时间
                  Text(
                    orderInfo['createTime'],
                    style:
                        const TextStyle(color: Color.fromARGB(255, 70, 69, 69), fontSize: 13),
                  ),
                  // 1.2 订单状态
                  Text(orderInfo['orderState'], style: const TextStyle(color: Colors.orange),)
                ],
              ),
              // 2. 商品图片+名称+数量+规格+单价
              Padding(
                padding: const EdgeInsets.only(top: 10),
                child: Row(
                  children: [
                    // 2.1 左侧商品图片
                    Image.network('https://yanxuan-item.nosdn.127.net/a09de222ed32efa8ffe359b1d5780574.jpg', width: 100, height: 100, fit: BoxFit.cover,),
                    // 2.2 右侧: 名称+数量+规格+单价
                     Expanded(
                      child: Padding(
                        padding: const EdgeInsets.only(left: 10),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            // 2.2.1 名称+数量
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                // 名称
                                Expanded(child: Text(orderInfo['name'])),
                                // 数量
                                Padding(
                                  padding: const EdgeInsets.only(left: 10),
                                  child: Text('x ${orderInfo['totalNum']}'),
                                )
                              ],
                            ),
                            // 2.2.2 规格
                            Padding(
                              padding: const EdgeInsets.only(top: 5),
                              child: Container(
                                padding: const EdgeInsets.only(left: 5, right: 5, top: 3, bottom: 3),
                                decoration: BoxDecoration(
                                  color: const Color.fromARGB(255, 249, 247, 247),
                                  borderRadius: BorderRadius.circular(10)
                                ),
                                child: Text(orderInfo['attrsText'], style: const TextStyle(color: Colors.grey),),
                              ),
                            ),
                            // 2.2.3 价格
                            Padding(
                              padding: const EdgeInsets.only(top: 5),
                              child: Text('¥${orderInfo['curPrice']}'),
                            ),
                          ],
                        ),
                      )
                    )
                  ],
                ),
              ),
              // 3. 合计
              Padding(
                padding: const EdgeInsets.only(top: 10),
                child: Container(
                  alignment: Alignment.centerRight,
                  child: Text(
                        '合计: ¥ ${orderInfo['curPrice'] * orderInfo['totalNum']}'),
                )
              ),
              // 4. 再次购买
              Padding(
                padding: const EdgeInsets.only(top: 10),
                child: Container(
                  alignment: Alignment.centerRight,
                  child: Container(
                    padding: const EdgeInsets.symmetric(horizontal: 3, vertical: 5),
                    decoration: BoxDecoration(
                      border: Border.all(color: const Color.fromARGB(255, 41, 40, 40))
                    ),
                    child: const Text('再次购买', style: TextStyle(color: Color.fromARGB(255, 68, 68, 68)),),
                  ),
                ),
              )
            ],
          ),
        ));
  }
}